<template>
	
	<!-- 标题效果开始 -->
	<view v-if="isTitleStyle">
		
		<!-- 微信小程序开始 -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="navBox" :style="{height:navHeight+'rpx',backgroundColor:navBackgroundColor}">
			<view class="navBoxCon" :style="{height:navigationBarHeight+'rpx',top:statusBarHeight+'rpx'}">
				<!-- 按钮区 -->
				<!-- [z-index: 999;] 处理backBtn类由于父级元素flex导致点击事件失效 -->
				<view class="backBtn" style="z-index: 999;" :style="{height:80+'rpx',lineHeight:80+'rpx',paddingLeft:paddingRight+'rpx',color:titleColor}">
					<view v-if="ifIndex" class="iconfont icon-shouye"></view>
					<view v-else class="iconfont icon-shangyiyehoutuifanhui" @click="backOrhome"></view>
				</view>
				<!-- 文本区 -->
				<view class="navTitle" :style="{height:80+'rpx',lineHeight:80+'rpx',fontSize:fontSizeTitle+'rpx',color:titleColor,width:navTitleWidth+'rpx'}">
					{{navTitle}}
				</view>
			</view>
		</view>
		<!-- #endif -->
		<!-- 微信小程序结束 -->
				 
		<!-- 非微信小程序【其他设备】开始 -->
		<!-- #ifndef MP-WEIXIN -->
		<view class="navBox" :style="{height:statusBarHeight+90+'rpx',backgroundColor:navBackgroundColor}">
			<view class="navBoxCon" :style="{top:statusBarHeight+'rpx'}">
				<!-- 按钮区 -->
				<!-- [z-index: 999;] 处理backBtn类由于父级元素flex导致点击事件失效 -->
				<view class="backBtn" style="z-index: 999;" :style="{paddingLeft:paddingRight+'rpx',color:titleColor}">
					<view v-if="ifIndex" class="iconfont icon-shouye"></view>
					<view v-else class="iconfont icon-shangyiyehoutuifanhui" @click="backOrhome"></view>
				</view>
				<!-- 文本区 -->
				<view class="navTitle" :style="{fontSize:fontSizeTitle+'rpx',color:titleColor,width:navTitleWidth+'rpx'}">
					{{navTitle}}
				</view>
			</view>
		</view>
		<!-- #endif -->
		<!-- 非微信小程序【其他设备】结束 -->
		
	</view>
	<!-- 标题效果结束 -->
	
	<!-- 非标题效果开始 -->
	<view v-else>
		
		<!-- 微信小程序开始 -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="navBox" :style="{height:navHeight+'rpx',backgroundColor:navBackgroundColor}">
			<view class="navBoxCon" :style="{height:navigationBarHeight+'rpx',top:statusBarHeight+'rpx',fontSize:fontSizeTitle+'rpx'}">
				<!-- 地区 -->
				<view class="position" :style="{height:customHeight+'rpx',lineHeight:customHeight+'rpx',paddingLeft:paddingRight+'rpx'}">
					<view class="iconfont icon-dingwei"></view>
					<text>中东地区</text>
					<view class="iconfont icon-youbian"></view>
				</view>
				<!-- 搜索 -->
				<view class="searchBox" :style="{height:customHeight+'rpx',lineHeight:customHeight+'rpx',marginRight:marginRight+'rpx',fontSize:fontSize+'rpx'}">
					<input @click="navigatorTo" class="search" placeholder="搜索..."/>
				</view>
			</view>
		</view>
		<!-- #endif -->
		<!-- 微信小程序结束 -->
		
		<!-- 非微信小程序【其他设备】开始 -->
		<!-- #ifndef MP-WEIXIN -->
		<view class="navBox" :style="{height:statusBarHeight+90+'rpx',backgroundColor:navBackgroundColor,fontSize:fontSizeTitle+'rpx'}">
			<view class="navBoxConOther" :style="{height:90+'rpx',top:statusBarHeight+'rpx'}">
				<!-- 地区 -->
				<view class="address" >
					<view class="iconfont icon-dingwei"></view>
					<text>中东地区</text>
					<view class="iconfont icon-youbian"></view>
				</view>
				<!-- 搜索 -->
				<view class="searchBox pl20">
					<input @click="navigatorTo" class="search" placeholder="搜索..."/>
				</view>
			</view>
		</view>
		<!-- #endif -->
		<!-- 非微信小程序【其他设备】结束 -->
		
	</view>
	<!-- 非标题效果结束 -->
		
</template>
 
<script>
	import {systemInfo} from '@/common/system.js'
	export default {
		name: "CustomNavbar",
		props: {
			//搜索字体大小
			fontSize: {
				type: Number, 
				default: 32 //rpx
			},
			//标题字体大小
			fontSizeTitle:{
				type: Number,
				default: 32 //rpx
			},
			//导航栏整体背景颜色
			navBackgroundColor: {
				type: String,
				default: '#49BDFB'
			},
			//标题字体颜色
			titleColor: {
				type: String,
				default: '#ffffff',
			},
			//h5端，app端需要传入自定义导航栏高度
			navHeightValue: {
				type: Number,
				default: 44 //px
			},
			//是否标题【常规】效果
			isTitleStyle:{
				type: Boolean,
				default: true //默认是
			},
			//标题
			navTitle:{
				type: String,
				default: ''
			},
		},
		computed: {
		
		},
		data() {
			return {
				statusBarHeight: 0, //状态栏高度
				navHeight: 0, //头部导航栏总体高度
				navigationBarHeight: 0, //导航栏高度
				customHeight: 0, //胶囊高度
				scaleFactor: 0, //比例系数
				menubarLeft: 0, //胶囊定位的左边left
				windowWidth: 0, //屏幕宽度
				ifIndex: true, //是否为首页
				marginRight: 0, //搜索框距离胶囊距离
				paddingRight: 0, //胶囊右侧距离屏幕右侧距离
				navTitleWidth: 0 //文本区域宽度【实现超宽隐藏】
			};
		},
		methods: {
			//返回
			backOrhome() {
				if (this.ifIndex) {
					uni.navigateTo({
						url:'/pages/index/index' 
					})
				} else {
					uni.navigateBack()
				}
			},
			//跳转搜索
			navigatorTo() {
				uni.navigateTo({
					url:'/pages/search/index'
				})
			}
		},
		created() {
			/* 获取设备信息 */
			const SystemInfomations = systemInfo()
			
			/* 通用平台 */
			this.statusBarHeight = SystemInfomations.statusBarHeight //状态栏高度
			this.scaleFactor = SystemInfomations.scaleFactor //比例系数
			this.windowWidth = SystemInfomations.windowWidth //当前设备的屏幕宽度
		    this.navTitleWidth = this.windowWidth - 200 //无胶囊【常规】情况减去按钮宽度100再让出右侧100即可
			/* 微信小程序平台 */
			// #ifdef MP-WEIXIN
			this.navHeight = SystemInfomations.navHeight + SystemInfomations.statusBarHeight //头部导航栏总高度【自定义导航栏高度+系统状态栏高度】
			this.navigationBarHeight = SystemInfomations.navHeight //头部导航栏高度
			this.customHeight = SystemInfomations.menuButtonHeight //胶囊高度
			this.menubarLeft = SystemInfomations.menuButtonLeft //胶囊左侧距离屏幕左侧距离
			this.paddingRight = SystemInfomations.windowWidth - SystemInfomations.menuButtonRight //屏幕宽度 - 胶囊右侧到屏幕左边距离
			this.marginRight = this.paddingRight + SystemInfomations.menuButtonWidth + 12 //12配合 search 元素左边距 实现搜索按钮左右同距
			this.navTitleWidth = this.menubarLeft - 100 //100为左侧按钮宽度
			// #endif
			
			const pages = getCurrentPages();
			const currentPageRoute = pages[pages.length - 1].route; //当前页面路由
			if (currentPageRoute === 'pages/index/index') {
				this.ifIndex = true
			} else {
				this.ifIndex = false
			}
		}
	}
</script>
 
<style>
	/* #ifdef MP-WEIXIN */
	.navBox{
		box-sizing: border-box;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		/* background-image: url(''); */
	}
	.navWrap{
		position: absolute;
		left: 0;
		display: flex;
		align-items: center;
		width: 100%;
	}
	.position{
		display: flex;
		align-items: center;
	}
	.search{
		border-radius: 200rpx;
		text-align: center;
		/* background: #f4f4f4; */
		margin-left: 12rpx;
		/* [flex: 1] 搭配父级flex实现占满右侧（同时注意左右间距） */
		flex: 1;
	}
	/* #endif */
	.navBoxCon{
		display: flex;
		align-items: center;
		position: fixed;
		width: 100%;
		height: 90rpx;
	}
	.backBtn{
		width: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80rpx;
		line-height: 80rpx;
	}
	.navTitle{
		height: 100%;
		overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
	}
	.navBoxConOther{
		box-sizing: border-box;
		display: flex;
		align-items: center;
		position:fixed;
		padding: 10rpx 20rpx;
		width: 100%;
	}
	.address{
		height: 100%;
		display: flex;
		align-items: center;
	}
	.searchBox{
		flex: 1;
	}
	.search{
		height: 60rpx;
		line-height: 60rpx;
		background-color: #f4f4f4;
		text-align: center;
		border-radius: 60rpx;
		font-size: 24rpx;
	}
</style>